<template>
  <div>
    <HomeSearch @showSearch="showSearch" />
    <!-- <header class="xm-header__search W_l" ref="hello"></header> -->
    <!-- 一级分类导航 文字导航 -->
    <FirstCategory></FirstCategory>
    <!-- 二级分类导航  图片导航 -->
    <SecondCategory></SecondCategory>

    <router-view></router-view>

    <ActionSheet v-model:show="isShowSearch">
      <Search @cancel="cancel()" />
    </ActionSheet>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  name: "Home",
});
</script>

<script lang="ts" setup>
import IconItem from "@/component/iconItm/index.vue";

// 引入搜索组件
import Search from "@/components/Search/index.vue";
import HomeSearch from "@/components/HomeSearch/index.vue";
import { ActionSheet } from "vant";

// 控制搜索组件显示的标识
const isShowSearch = ref(false);

// 自定义事件——搜索页将取消按钮的状态传递过来
const cancel = () => {
  isShowSearch.value = false;
};

// 显示搜索框
const showSearch = () => {
  isShowSearch.value = true;
};

console.log(isShowSearch.value);
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

// 假 搜索栏
.xm-header__search.W_l {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 15px 15px 5px 15px;
  height: 50px;
  position: relative;
  z-index: 100;
  background: pink;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

// 轮播图
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
